<template>
  <a-modal
    :open="open"
    width="800px"
    title="特殊参考值"
    centered
    :keyboard="false"
    :ok-button-props="{ disabled: !selectItem.id }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <BaseTable
      :loading="loading"
      bordered
      column-code="000491"
      :data-source="tableData"
      :custom-row="(record) => ({ onClick: () => onSelectRow(record) })"
      :row-class-name="(record) => (record.id === selectItem.id ? 'selected-row' : '')"
      :extra-height="50"
      max-fill
    >
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'xh'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'referName'">
          <EditCell title="标题">
            <a-input v-model:value="record.referName" placeholder="请输入" @change="record.change = true" @blur="onBlurInput(record, $event)" />
          </EditCell>
        </template>
        <template v-if="column.dataIndex === 'maxValue'">
          <EditCell title="最大值">
            <a-input v-model:value="record.maxValue" placeholder="请输入" @change="record.change = true" @blur="onBlurInput(record, $event)" />
          </EditCell>
        </template>
        <template v-if="column.dataIndex === 'minValue'">
          <EditCell title="最小值">
            <a-input v-model:value="record.minValue" placeholder="请输入" @change="record.change = true" @blur="onBlurInput(record, $event)" />
          </EditCell>
        </template>
        <template v-if="column.dataIndex === 'referValue'">
          <span>{{ record.minValue }}-{{ record.maxValue }} {{ rowData.unit }}</span>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <BaseButton confirm-text="确定删除?" type="text" size="small" danger @click="onDelete(record)">删除</BaseButton>
        </template>
      </template>
    </BaseTable>
    <div class="flex justify-center mt-2">
      <a-button type="primary" ghost class="mr-2" @click="addRow">新增一行</a-button>
      <a-button type="primary" @click="saveTable">保存</a-button>
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:open', 'success'])
const selectItem = ref({})
const { loading, tableData, getData } = useTable({
  url: '/lis/LisRecord/getReferList',
  immediate: false,
  pagination: false,
  formatParams: () => {
    return {
      zjm: '',
      lisItemId: props.rowData.lisItemId
    }
  }
})
const onCancel = () => {
  selectItem.value = {}
  emit('update:open', false)
}
const onOk = () => {
  emit('success', {
    ...selectItem.value,
    referValue: `${selectItem.value.minValue}~${selectItem.value.maxValue}`
  })
  onCancel()
}
const addRow = () => {
  tableData.value.push({
    isNew: true,
    lisItemId: props.rowData.lisItemId,
    maxValue: '',
    minValue: '',
    referName: '',
    referValue: ''
  })
}
const onBlurInput = (record) => {
  if (!record.isNew && record.change) saveRow(record, true)
}
const saveRow = async (record, status) => {
  const { code, msg } = await post('/lis/LisRecord/doSaveRefer', {
    ...record,
    referValue: record.minValue + '-' + record.maxValue + ' ' + props.rowData.unit
  })
  if (code !== 0) return message.error(msg || '请求失败')
  record.change = false
  if (status) {
    message.success(msg || '保存成功')
    getData()
  }
}
const saveTable = () => {
  const newTable = tableData.value.filter((item) => {
    return item.isNew
  })
  newTable.forEach((item, index) => {
    saveRow(item, index === newTable.length - 1 ? true : false)
  })
}
const onDelete = async (record) => {
  const { code, msg } = await post('/lis/LisRecord/doDelRefer', {
    id: record.id
  })
  if (code !== 0) return message.error(msg || '请求失败')
  message.success(msg || '删除成功')
  getData()
}
const onSelectRow = (record) => {
  selectItem.value = record
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      getData()
    }
  }
)
</script>
<style lang="less" scoped></style>
